<script setup lang="ts">
import {Icon} from '@/components/Icon'
import {propTypes} from '@/utils/propTypes'
import {useDesign} from '@/hooks/web/useDesign'
import { ElNotification } from 'element-plus'
const {getPrefixCls} = useDesign()
const prefixCls = getPrefixCls('screenfull')
import {dataCount, dataLatest, dataList, dataUpdate} from "@/api/message";
import {onMounted, ref,onBeforeUnmount} from 'vue'
import {useDevice} from "@/hooks/web/useDevice";
const {mobile} = useDevice()
const dialogVisible = ref(false)
const activeName = ref('')
const loading = ref(false)
const tableData = ref([])
const infinite = ref('')
const count = ref('')
defineProps({
  color: propTypes.string.def('')
})
const page = ref(0)
const pageTotal = ref(1);
const timer = ref('')
const lastTimer = ref('')
const handleClick = async () => {
  dialogVisible.value = true;
  page.value = 1
  activeName.value = ''
  tableData.value = []
  fetchData()
}

const fetchData = async () => {
  loading.value = true
  let data = {
    is_read: activeName.value,
    page: page.value,
    limit: 10,
  }
  let res = await dataList(data);
  loading.value = false
  if (res) {
    pageTotal.value = res.page
    tableData.value = [...tableData.value, ...res.data]
    console.log(infinite.value.scrollTop);
    console.log(tableData.value);
  }
}

const expandChange = async (expandedRows, expanded) => {
  console.log(expandedRows);
  //长度存在的时候代表的是展开了
  if (expanded.length) {
    loading.value = true
    await dataUpdate({id: expandedRows.id});
    loading.value = false
  }
}

const load = () => {

  if (page.value <= pageTotal.value) {
    page.value++
    fetchData();
    infinite.value.scrollTop = infinite.value.scrollTop - 50
  }
}

const handleTabChange = () => {
  tableData.value = [];
  page.value = 1
  fetchData();
}

onMounted(async () => {
  let res = await dataCount();
  count.value = res.data.count
  fetchCountData();
  fetchLastData();
})

onBeforeUnmount(()=>{
  clearInterval(timer.value)
  clearInterval(lastTimer.value)
})

const fetchCountData = () => {
  timer.value = setInterval(async () => {
    let res = await dataCount();
    count.value = res.data.count
  }, 3000)
}

const fetchLastData = ()=>{
  lastTimer.value = setInterval(async () => {
    let res = await dataLatest();
    if (res.data){
      ElNotification({
        title: res.data.title,
        message: res.data.content,
        duration: 0,
      })
    }
  }, 3000)
}
</script>

<template>

  <div :class="prefixCls" @click="handleClick">
    <el-badge :value="count" class="item" :max="99" style="margin-top: 3px;margin-right: 10px">
      <el-icon :size="18" :color="color">
        <Bell/>
      </el-icon>
    </el-badge>
  </div>
  <el-dialog v-model="dialogVisible" title="消息列表" draggable  :width="mobile  ?'95%':'50%'">
    <el-tabs
        v-model="activeName"
        type="card"
        class="demo-tabs"
        @tab-change="handleTabChange"
    >
      <el-tab-pane label="全部" name=""></el-tab-pane>
      <el-tab-pane label="未读" name="1"></el-tab-pane>
      <el-tab-pane label="已读" name="2"></el-tab-pane>

    </el-tabs>
    <div v-infinite-scroll="load" class="box infinite-list" ref="infinite" style="overflow: auto;">
      <el-table :data="tableData"
                stripe style="width: 100%;padding-bottom: 50px"
                :show-header="false"
                v-loading="loading"
                @expand-change="expandChange">
        <el-table-column type="expand">
          <template #default="props">
            <div m="4" style="padding-left: 12px">
              <p m="t-0 b-2">发送人: {{ props.row.from_name }}</p>
              <p m="t-0 b-2">内容: {{ props.row.content }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="Date"/>
        <el-table-column prop="created_at" label="Name" width="180"/>
      </el-table>
    </div>
  </el-dialog>
</template>
<style scoped lang="less">
.title {
  width: 300px;
}

.box {
  width: 100%;
  height: 300px;
}

.time {
  width: 120px;
}
</style>
